<template>
	<view class="post_container">
		<view class="main_post">
			<view class="post_title">
				<view class="user">
					<view>
						<image :src="props.userAvatar" class="head" v-if="props.userAvatar!=null"></image>
						<image src="../../static/logo.png" class="head" v-if="props.userAvatar==null"></image>
					</view>
					<view class="name" v-if="props.username!= null">
						{{props.username}}
					</view>
					<view class="name" v-if="props.username== null">
						未命名用户
					</view>
				</view>
				<add-frind style="margin-left: 60rpx;"></add-frind>
			</view>

			<view class="post_img">
				<!-- <image :src="pictureUrl" mode="aspectFill" style="height: 100%;width: 100%;border-radius: 20px;">
						{{props.pictureUrl}}
					</image> -->
				<image :src="pictureUrl" mode="aspectFill" style="height: 100%;width: 100%;border-radius: 20px;">
				</image>

			</view>

		</view>

		<view style="display: flex; margin-top: 15rpx; margin-left: 60rpx;">
			<image src="../../static/location.svg" style="width: 32rpx; height: 32rpx;"></image>
			<view style="font-size: 20rpx; color: #707070; margin-top: 8rpx; margin-left: 10rpx;">
				{{detailLocation}}
			</view>
		</view>

		<view class="post_comment">
			<!-- 			<image :src="likedUrl" style="width: 40rpx; height: 40rpx; margin-top: 21rpx; margin-left: 15rpx;"
				@click="clickLike(id)" v-if="likesNum>0"></image> -->
			<!-- 			<view class="users">
				<image :src="props.userAvatar" class="head"></image>
			</view> -->
			<!-- 			<view class="users">
				<image :src="props.userAvatar" class="head"></image>
			</view> -->
			<!-- 			<view class="users">
				<image :src="props.userAvatar" class="head"></image>
			</view> -->
			<view v-if="likesNum>0" style="font-size: 30rpx; color: #707070; margin-top: 30rpx; margin-left: 10rpx;">
				{{props.likesNum}}+
			</view>

			<view class="icons">
				<image :src="isLike?likedUrl:likeUrl" class="icon" @click="clickLike(props.id)"></image>
				<image :src="isShare?sharedUrl:shareUrl" class="icon" style="margin-left: 70rpx;" @click="clickShare">
				</image>
			</view>
			<view class="like_head"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineProps
	} from "vue";

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	import addFrind from "@/components/addFriendButton/addFriendButton.vue"
	import {
		request
	} from "../../service/request";
	// 接收父组件传递过来的值
	//const props = defineProps(['username', 'userAvatar', 'pictureUrl', 'likesNum', 'detailLocation'])

	const props = defineProps({
		id: String,
		username: String,
		userAvatar: String,
		pictureUrl: String,
		likesNum: Number,
		detailLocation: String,
		city: String
	})
	const pictureUrl = props.pictureUrl
	const isLike = ref(false)
	const isShare = ref(false)
	const avatarList = ref([])
	const likeUrl = "../../static/like.svg"
	const likedUrl = "../../static/liked.svg"
	const shareUrl = "../../static/share.svg"
	const sharedUrl = "../../static/shared.svg"

	function clickLike(id) {
		//点赞
		request({
			url: '/passage/followPassage',
			method: 'POST',
			data: {
				passageId: id
			}
		})
		isLike.value = true
	}

	function clickShare() {
		isShare.value = !isShare.value
	}

	const getPassageByAddress = async () => {
		let res = await request({
			url: '/passage/getPassageByAddress',
			method: 'POST',
			data: {
				address: props.city
			}
		})
		console.log(res.data)
		//avatarList.value = res.data
	}

	onLoad(() => {
		//getPassageByAddress()
	})
</script>

<style>
	.post_container {
		width: 90%;
		margin: 20px auto;
		border-radius: 20px;
		box-shadow: 0rpx 20rpx 20rpx rgba(90, 90, 90, 0.1);
		padding: 15rpx;
		padding-bottom: 100rpx;
	}

	.name {
		margin-top: 19rpx;
		margin-left: 18rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.post_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		overflow: hidden;
	}

	.user {
		display: flex;
	}

	.users {
		margin: 6rpx;
	}

	.main_post {
		padding: 0 20px;
	}

	.post_img {
		width: 100%;
		height: 200px;
		border-radius: 20px;
	}

	.icon {
		height: 50rpx;
		width: 50rpx;
	}

	.post_comment {
		display: flex;
		justify-content: end;
	}

	.icons {
		/* position: relative; */
		margin-top: 20rpx;
		/* 		left: 100rpx; */

		position: absolute;
		left: 480rpx;
	}
</style>